{% extends 'web_base/base_head_foot.html' %}
{% load staticfiles %}

{% block base_link_script %}<link rel="stylesheet" href="{% static 'css/index.css' %}"/>{% endblock %}

{% block base_body %}
<div class="banner">
    <div class="image ui fluid">
        <a href="game_main.html"><img src="/upload/images/banner1.jpg"/></a>
    </div>
</div>
<div class="main ui container">
    <div class="lt_card">
        {% for ld in lead %}
        <a href="{% url 'real_game_detail' %}?id={{ ld.id }}">
            <div class="ui card">
                <div class="content tit">
                    <div class="game_logo">
                    <img class="ui image" src="/upload/{{ ld.gamedetail.icon }}">
                    </div>
                    <div class="game_name">{{ ld.name }}</div>
                </div>
                <div class="image">
                    <img src="/upload/{{ ld.gamedetail.image }}">
                </div>
                <div class="content">{{ ld.gamedetail.description }}</div>
            </div>
        </a>
        {% endfor %}
        <div class="ui container">
            <a href="game_more.html"><button class="button ui">更多</button></a>
        </div>
    </div>
    <div class="rt_card">
        <div class="ui card">
            <div class="content">
                <img class="left floated ui image" src="/upload/images/ewm.png">
                <div class="header">天财游戏</div>
                <div class="meta">欢迎关注我们</div>
                <div class="meta">
                    <dl>
                        <dd class="wx">
                            <span  data-content="合作邮箱：cooperation@taptap.com" class="ui avatar image"></span>
                        </dd>
                        <dd class="qq">
                            <span  data-content="合作邮箱：cooperation@taptap.com" class="ui avatar image"></span>
                        </dd>
                        <dd class="wb">
                            <span  data-content="合作邮箱：cooperation@taptap.com" class="ui avatar image"></span>
                        </dd>
                        <dd class="yx">
                            <span  data-content="合作邮箱：cooperation@taptap.com" class="ui avatar image"></span>
                        </dd>
                    </dl>
                </div>
            </div>
        </div>

        <p class="tit"><a href="detail.html"><span>排行榜</span></a><a href="detail.html"><span>更多</span></a></p>
        <div class="ui grid">
            <div class="twelve wide stretched column pr0">
                <div class="ui segment hot hide">
                    <div class="ui ordered list">
                        {% for ht in hot %}
                        <a class="item hot" href="{% url 'real_game_detail' %}?id={{ ht.id }}">
                            <img class="ui image" src="/upload/{{ ht.gamedetail.icon }}">
                            <p>
                                <span>{{ ht.name }}</span>
                                <span class="star"><o>{{ ht.gamedetail.level }}</o><i class="ui icon star"></i></span>
                            </p>
                        </a>
                        {% endfor %}
                    </div>
                </div>

                <div class="ui segment new">
                    <div class="ui ordered list">
                        {% for ns in news %}
                        <a class="item hot" href="{% url 'real_game_detail' %}?id={{ ns.id }}">
                            <img class="ui image" src="/upload/{{ ns.gamedetail.icon }}">
                            <p>
                                <span>{{ ns.name }}</span>
                                <span class="star"><o>{{ ns.gamedetail.level }}</o><i class="ui icon star"></i></span>
                            </p>
                        </a>
                        {% endfor %}
                    </div>
                </div>
            </div>
            <div class="four wide column pl0">
                <div class="ui vertical fluid right tabular menu">
                    <a class="active item item_hot"><span>HOT</span></a>
                    <a class="item item_new"><span>NEW</span></a>
                </div>
            </div>
        </div>
        <p class="tit list"><a href="#"><span>热门游戏中心</span></a><a href="#"><span></span></a></p>
        <div class=" ui card">
            <div class="content btn_list">
                {% for gc in game_class %}
                <a href="{% url 'real_main' %}?class_id={{ gc.id }}">
                <button class="ui button">{{ gc.class_name }}</button>
                </a>
                {% endfor %}
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block base_script %}
    $(document).ready(function() {
        $('.ui.image.avatar').popup();
        $('.tabular.menu').tab();


        $('.item_hot').click(function () {
            $('.ui.segment.new').addClass("hide");
            $('.ui.segment.hot').removeClass("hide");
        });
        $('.item_new').click(function () {
            $('.ui.segment.new').removeClass("hide");
            $('.ui.segment.hot').addClass("hide");
        });

    });
{% endblock %}